<template>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home/statistics' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input clearable v-model="queryInfo.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input clearable  v-model="queryInfo.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input clearable v-model="queryInfo.phone" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchUser">查询</el-button>
      </el-form-item>
       <el-form-item>
          <el-button  type="primary" @click="openAddUser()">添加用户</el-button>
      </el-form-item>
    </el-form>
  <el-main>
    <el-table :data="userList" border  v-loading="loading" >
      <el-table-column align="center" type="index" label="#" width="60">
      </el-table-column>
      <el-table-column align="center" prop="id" label="用户ID" width="100">
      </el-table-column>
      <el-table-column align="center" prop="name" label="昵称" width="140">
      </el-table-column>
      <el-table-column align="center" prop="email" label="邮箱" width="180">
      </el-table-column>
      <el-table-column align="center" prop="phone" label="手机号" width="140">
      </el-table-column>
      <el-table-column align="center"  label="是否锁定" width="80">
        <template slot-scope="scope">
          <el-tag  v-if="scope.row.is_locked === 0">正常</el-tag>
          <el-tag type="danger" v-else>已锁定</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建时间" width="180">
      </el-table-column>
      <el-table-column align="center" prop="updated_at" label="更新时间" width="180">
      </el-table-column>
      <el-table-column align="center" label="操作">
           <template slot-scope="scope">
             <el-button style="margin-right: 10px" type="primary" @click="openEditDialog(scope.row.id)" size="mini" icon="el-icon-edit" circle></el-button>
             <el-switch :inactive-value="0" :active-value="1" @change="changeSwitch(scope.row.id)" v-model="scope.row.is_locked" ></el-switch>
           </template>
      </el-table-column>
    </el-table>

    <el-pagination
        style="margin-top: 20px"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="pagination.total">
    </el-pagination>

  </el-main>
  <!-- // 添加用户对话框 -->
  <el-dialog title="添加用户" width="25%" :visible.sync="dialogFormVisibleAddUser">
  <el-form :model="addForm">
    <el-form-item label="用户名" label-width="80px">
      <el-input v-model="addForm.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" label-width="80px">
      <el-input v-model="addForm.email"></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="80px">
      <el-input v-model="addForm.password"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleAddUser = false">取 消</el-button>
    <el-button type="primary" @click="addUserForm">确 定</el-button>
  </div>
</el-dialog>


<!-- // 修改用户信息 -->
<el-dialog title="修改用户" width="25%" :visible.sync="dialogFormVisibleEditUser">
  <el-form :model="editForm">
    <el-form-item label="用户名" label-width="70px">
      <el-input v-model="editForm.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" label-width="70px">
      <el-input v-model="editForm.email"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleEditUser = false">取 消</el-button>
    <el-button type="primary" @click="editUserForm">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
import {getUserList,setUserState,addUser,getUserInfoDeatil,changeUserInfo} from "../../api/user";

export default {
  name: "Statistics",
  data(){
    return{
      userList:[],
      pagination:{},
      currentPage:1,
      queryInfo:{
        pageNum:1,
        name:'',
        email:'',
        phone:''
      },
      loading:false,
      dialogFormVisibleAddUser:false,
      dialogFormVisibleEditUser:false,
      addForm:{
        name:'',
        email:'',
        password:''
      },
      editForm:{
        name:'',
        email:''
      },
      currentUserId:null,
    }
  },
  mounted() {
    this.getUserListData()
  },
  methods:{
    async getUserListData(){
      this.loading = true
      const res = await  getUserList(this.queryInfo)
      if(res && res.status === 200){
        this.loading = false
        this.userList = res.data.data
        this.pagination = res.data.meta.pagination
      }
      console.log(res);
    },
    handleCurrentChange(val){
      console.log(val);
      this.queryInfo.pageNum = val
      this.getUserListData()
    },
    async changeSwitch(id){
      const res = await setUserState(id)
      if(res && res.status === 204){
        this.$message.success('操作成功！')
        this.getUserListData()
      }else{
        // this.$message.error('系统数据，禁止操作')
        this.getUserListData()
      }
      console.log(res);
    },
    //查询用户
    searchUser(){
      this.getUserListData()
    },
    // 打开添加用户弹窗
    openAddUser(){
      this.dialogFormVisibleAddUser = true
    },
    // 添加用户
    async addUserForm(){
      const  res = await addUser(this.addForm)
      if(res && res.status === 201){
        this.dialogFormVisibleAddUser = false
        this.$message.success('添加成功')
        this.getUserListData()
      }
      console.log(res)
    },

    //  打开用户编辑弹窗
    async openEditDialog(id){
      this.currentUserId = id
      const res = await getUserInfoDeatil(id)
      if(res && res.status === 200){
        this.editForm = res.data
        this.dialogFormVisibleEditUser = true
      }
      console.log(res)
    },

    //  修改用户信息

    async editUserForm(){
      const res = await changeUserInfo(this.currentUserId,this.editForm)
      if(res && res.status === 204){
        this.$message.success('更新成功')
        this.dialogFormVisibleEditUser = false
        this.getUserListData()
      
      }
      console.log(res)
    }
  }
}
</script>

<style scoped lang="css">
.el-breadcrumb{
  /*margin-left: 20px;*/
  padding:0 0 0 20px;
}
.el-form{
  padding:0 0 0 20px;
  margin-top: 20px;
}
</style>